{% extends 'music_base.html' %}
{% load static %}
{% block title %}
音乐推荐
{% endblock %}
{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;

        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }

    .my_button {
            {
            #background-color: red;
            /* Green */
            #
        }

        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }

    .my_button1 {
        background-color: white;
        color: black;
        border: 2px solid red;
        font-size: 15px;
    }

    .my_button1:hover {
        background-color: red;
        color: white;
    }

    .my_button2 {
        background-color: white;
        color: black;
        border: 2px solid deepskyblue;
        font-size: 15px;
    }

    .my_button2:hover {
        background-color: deepskyblue;
        color: white;
    }
</style>
{% endblock %}
{% block body %}
<div class="profile-container">
    <h1>{{ username }}的专属音乐推荐</h1>
    <h6>结合个人浏览记录和标签，实现的个人个性化推荐</h6>
    <div>
        <table>
            <thead>
                <tr>
                    <th>名称</th>
                    <th class="text-center">图片</th>
                    <th class="text-center">音乐</th>
                    <th class="text-center">查看详情</th>
                </tr>
            </thead>
            <tbody>
                {% for item in response_data %}
                <tr>
                    <td>{{ item.name }}</td>
                    <td>
                        <img src="{{ item.image.url }}" alt="" style="width: 120px; height: 90px;">
                    </td>
                    <td>
                        <audio controls>
                            <source src="{{ item.file_url }}" type="audio/mpeg">
                            您的浏览器不支持音频元素。
                        </audio>
                    </td>
                    <td>
                        <a href="/music/detail/{{ item.id }}">
                            <button class="btn-sm btn my_button2">查看详情</button>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}